<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@include file="/resource/common/taglib.jspf"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>${SESSION_COMPANY}-用户受权</title>
<%@include file="/resource/common/jquery.jspf"%>
<%@include file="/resource/common/commonCss.jspf"%>
<%@include file="/resource/common/kindeditor.jspf"%>
<%@include file="/resource/common/bootstrap.jspf"%>
<%@include file="/resource/common/validate.jspf"%>
<%@include file="/resource/common/showLoading.jspf"%>
<%@include file="/resource/common/tips.jspf"%>
<style type="text/css">

#user-title-box {
	width: auto;
	height: 30px;
	overflow: hidden;
	padding: 0 10px;
	border-bottom: 1px solid #e2e2e2;
	text-align: center;
}

#user-title-box span {
	color: #FF0000;
	margin: 0 5px;
}

#user-authority-box {
	width: auto;
	height: auto;
	overflow: hidden;
}

#user-authority-left-box {
	float: left;
	width: auto;
	min-width: 160px;
	height: 500px;
	overflow: hidden;
	margin-right: 20px;
	border-right: 1px solid #e2e2e2;
}

#user-authority-right-box {
	float: left;
	width: auto;
	overflow: hidden;
	height: auto;
}

#user-authority-right-box #moduleList {
	padding: 10px 0 10px 0;
}

#moduleSave {
	width: auto;
	height: auto;
	overflow: hidden;
	padding: 10px 0 10px 0;
	display: none;
	clear: both;
}

dl {
	font-family: "Microsoft YaHei";
	display: block;
	padding: 0;
	margin: 3px 0;
	height: 24px;
	line-height: 24px;
	clear: both;
}

dl dt {
	float: left;
	background-color: #666600;
	color: #FFF;
	padding: 0 10px;
}

dl dd {
	float: left;
	word-break: keep-all;
	overflow: hidden;
	padding: 0px 10px;
}

dl dd label {
	display: inline-block;
	font-weight: normal;
}

select {
	border-radius: 4px;
	border: 1px solid #ccc;
	font-family: inherit;
	font-size: 12px;
	height: 26px;
	line-height: 26px;
}

#role-authority-box {
	margin-top: 10px;
	padding-bottom: 0px;
}

#role-authority-left-box {
	float: left;
	width: 305px;
	height: auto;
	border: 1px solid #e2e2e2;
}

#role-authority-left-box div {
	width: auto;
	height: 30px;
	line-height: 30px;
	text-align: center;
}

#role-authority-left-box select {
	padding: 10px;
	margin: 10px;
	width: 280px;
	height: 300px;
}

#role-authority-center-box {
	float: left;
	width: auto;
	height: auto;
	padding: 50px 0px;
	text-align: center;
	margin-left: 50px;
}

#role-authority-center-box input {
	margin: 10px 0;
	width: 60px;
	height: 26px;
}

#role-authority-right-box {
	float: left;
	width: 305px;
	height: auto;
	border: 1px solid #e2e2e2;
}

#role-authority-right-box div {
	width: auto;
	height: 30px;
	line-height: 30px;
	text-align: center;
}

#role-authority-right-box select {
	padding: 10px;
	margin: 10px;
	width: 280px;
	height: 300px;
}

.label_on {
	border: 2px solid red;
}
-->
</style>
<script type="text/javascript">
	var PATH = "${ctx}";
	var validateForm;
	function doAuthoritySubmit(){
		if(validateForm.form()){
			SaveUserRole();
			return true;
		}
		return false;
	}
	$(document).ready(function() {
		$("body").showLoading();
		validateForm = $("#inputForm").validate({
			errorElement : "em",
			errorClass : "validate_error",
			submitHandler: function(form) { //通过之后回调
				SaveUserRole();
			},
			invalidHandler: function(form, validator) {
				return false;
			}
		});
		
		$("#add").click(function() {
			if ($("#allRole option:selected").length > 0) {
				$("#allRole option:selected").each(function() {
					$("#haveRole").append("<option value='" + $(this).val()+ "' selected='selected'>" + $(this).text()+ "</option");
							$(this).remove();
					});
			} else {
				alert("请选择要添加的角色！");
			}
		});
		$("#cut").click(function() {
			if ($("#haveRole option:selected").length > 0) {
				$("#haveRole option:selected").each(function() {
					$("#allRole").append("<option value='" + $(this).val()+ "'>" + $(this).text()+ "</option");
						$(this).remove();
					});
			} else {
				alert("请选择要删除的角色！");
			}
		});
		initUserRole();
	});

	//初始化用户的角色
	function initUserRole() {
		var uid = $("#uid").val();
		$.ajax({
			async : true, // 是否异步
			type : 'Post',
			url : 'userRoleAjaxList.do',
			data : 'id=' + uid,
			dataType : 'json',
			success : function(data) {
				if (data.ret == 1) {
					$.each(data.data, function(i, item) {
						var rid = item.rid;
						var name = item.name;
						$("#allRole option[value='" + rid + "']").remove();
						var html = "<option value="+rid+">" + name+ "</option>";
						$("#haveRole").append(html);
					});
				}
				$("body").hideLoading();
			}
		});
	}

	//保存用户所拥有的角色
	function SaveUserRole() {
		var uid = $("#uid").val();
		var haveRoleList = new Array();
		$("#haveRole option").each(function() {
			haveRoleList.push($(this).val());
		});
		var roles = haveRoleList.join(",");
		var tload = top.layer.load(0, {
			shade : [ 0.5, '#fff' ]
		}); // 0代表加载的风格，支持0-2
		$.ajax({
			async : true, // 是否异步
			type : 'Post',
			url : 'saveSysUserRole.do',
			data : 'uid=' + uid + "&roles=" + roles,
			dataType : 'json',
		}).done(function(data) {
			// 成功回调，
			if (data != null) {
				$("#asyncResult").val(data.ret);
				$("#asyncResultError").val(data.msg)
			}else{
				$("#asyncResult").val(-110);
			}
			top.layer.close(tload);
		}).fail(function() {
			// 失败回调
			top.layer.close(tload);
			$("#asyncResult").val(-110);
		});
	}
	function asyncCallBackResultError(){
		return $("#asyncResultError").val();
	}
	function asyncCallBackResult(){
		return $("#asyncResult").val();
	}
</script>
</head>
<body>
	<div id="body-wrapper">
		<div id="main-content">
			<div class="clear"></div>
			<div class="content-box">
				<div class="content-box-content">
					<input type="hidden" id="asyncResult" name="asyncResult" value="-1" /> 
					<input type="hidden" id="asyncResultData" name="asyncResultData" value="-1" /> 
					<input type="hidden" id="asyncResultError" name="asyncResultError" value="-1" /> 
					<form:form id="inputForm" name="form1" method="post" class="form-horizontal" action="">
						<input type="hidden" id="uid" name="uid" value="${user.uid}" />
						<div id="user-title-box">
							给<span>${user.username}</span>授权
						</div>
						<div id="user-authority-box">
							<div id="role-authority-box">
								<div class="row">
									<div class="col-md-5 col-sm-5 col-xs-5" >
										<div class="form-group">
											<label class="col-md-2 col-sm-2 col-xs-2 col-sm-2 col-xs-2 control-label"></label>
											<div class="col-md-8 col-sm-8 col-xs-8">
												<div id="role-authority-left-box">
													<div>角色列表</div>
													<select id="allRole" name="allRole" multiple="multiple">
														<c:forEach var="rolelist" items="${rolelist}" varStatus="abc">
															<option value="${rolelist.rid}">${rolelist.name}</option>
														</c:forEach>
													</select>
												</div>
											</div>
										</div>
									</div>
									<div class="col-md-2 col-sm-2 col-xs-2" >
									<div class="form-group">
										<div id="role-authority-center-box">
											<shiro:hasPermission name="SysUser:SYS_GRANT">
												<div class="form-group">
													<button type="button" id="add"  class="btn btn-lg btn-primary " style="width: 100px;margin-top: 50px;"><i class="fa fa-forward"></i></button>
												</div>
												<div class="form-group">
													<button type="button" id="cut"  class="btn btn-lg btn-danger " style="width: 100px;margin-top: 70px"><i class="fa fa-backward"></i></button>
												</div>
											</shiro:hasPermission>
										</div>
										</div>
									</div>
									<div class="col-md-5 col-sm-5 col-xs-5" >
										<div class="form-group">
											<div id="role-authority-right-box">
												<div>用户角色</div>
												<select id="haveRole" name="haveRole" multiple="multiple"></select>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</form:form>
				</div>
			</div>
		</div>
	</div>
</body>
</html>
